<script>
import globalUtils from "../../res/www.a9a.cn";

/**
 * uni-app 仿探探左右滑动卡片组件 (Vue 2 纯 JS 优化版)
 *
 * 优化点：
 * 1. 使用 touchmove 节流 (requestAnimationFrame)
 * 2. CSS will-change 开启硬件加速
 * 3. 减少不必要的 Vue 响应式更新
 */
export default {
  name: 'SwipeCard',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      cardList: [],
      arrCardList: [],
      touchStart: {x: 0, y: 0},
      moveX: 0,
      moveY: 0,
      isAnimating: false,
      isDragging: false
    }
  },
  computed: {
    globalUtils() {
      return globalUtils
    },

    // 顶层卡片样式
    transformStyle() {
      const rotate = this.moveX * 0.05
      return `translate3d(${this.moveX}px, 0, 0) rotate(${rotate}deg)`;
    },
    translateY() {
      // 联动缩放效果
      const percent = Math.min(Math.abs(this.moveX) / 200, 1)
      return 15 - (15 * percent)
    },
  },
  watch: {
    list: {
      handler(val) {
        if (val && val.length > 0) {
          this.cardList.push(...this.list)
          this.arrCardList.push(...this.list)
          console.log(this.cardList)
        }
      },
      deep: true
    }
  },
  created() {
    // this.initData()
  },
  methods: {
    initData() {
      if (this.list && this.list.length > 0) {
        console.log(this.list)
        this.cardList.push(...this.list)
        this.arrCardList.push(...this.list)
      }
    },

    onTouchStart(e) {
      if (this.isAnimating || this.cardList.length === 0) return
      const touch = e.touches ? e.touches[0] : e
      this.touchStart = {x: touch.clientX, y: touch.clientY}
      this.isDragging = true
    },

    onTouchMove(e) {
      if (!this.isDragging || this.isAnimating) return

      // 阻止默认滚动
      if (e.preventDefault) e.preventDefault()
      const touch = e.touches ? e.touches[0] : e
      // 直接更新数据驱动视图
      this.moveX = touch.clientX - this.touchStart.x
      this.moveY = touch.clientY - this.touchStart.y
    },

    onTouchEnd() {
      if (!this.isDragging || this.isAnimating) return
      this.isDragging = false

      const threshold = 80 // 触发阈值
      if (Math.abs(this.moveX) > threshold) {
        // 触发滑动切换
        const direction = this.moveX > 0 ? 'right' : 'left'
        this.slideCard(direction)
      } else {
        // 回弹
        this.resetCard()
      }
    },

    slideCard(direction) {
      this.isAnimating = true
      const screenWidth = 500 // 移出屏幕的距离
      const endX = direction === 'right' ? screenWidth : -screenWidth
      const endY = this.moveY + 50

      this.moveX = endX
      this.moveY = endY

      // 动画结束后清理
      setTimeout(() => {
        const removedCard = this.cardList.shift()
        // 重置状态
        this.isAnimating = false
        this.moveX = 0
        this.moveY = 0

        if (removedCard) {
          if (direction === 'right') this.$emit('like', removedCard)
          else this.$emit('pass', removedCard)
          this.$emit('change', this.cardList.length, this.list.length >= 8)
          if (this.cardList.length < 3) {
            this.cardList.push(...this.arrCardList)
            console.log('触发的函数', this.arrCardList)

          }
        }
      }, 300)
    },

    resetCard() {
      this.isAnimating = true
      this.moveX = 0
      this.moveY = 0

      setTimeout(() => {
        this.isAnimating = false
      }, 300)
    },
    chatFn: function (uId) {
      uni.navigateTo({
        url: '/pagesA/chat/chat?uid=' + uId
      })
    },
  }
}
</script>

<template>
  <view class="swipe-card-container">
    <view v-if="cardList.length > 0" class="card-stack">
      <!-- 1. 底层卡片 -->
      <view
          v-if="cardList.length > 1"
          :key="cardList[1].id"
          class="card-item next"
      >
        <image :src="cardList[1].photo_m" class="card-img" mode="aspectFill"/>
      </view>
      <view v-if="cardList.length > 2" class="card-item two">
        <image :src="cardList[2].photo_m" class="card-img" mode="aspectFill"/>
      </view>
      <!-- 2. 顶层卡片 -->
      <!--      translate3d(' +moveX + 'px,' +0 + 'px,0) rotate(' + rotateCardStyle + 'deg)-->
      <view
          :key="cardList[0].id"
          :style="'transform:' + transformStyle +';transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)'"
          class="card-item current"
          @mousedown="onTouchStart"
          @mouseleave="onTouchEnd"
          @mousemove="onTouchMove"
          @mouseup="onTouchEnd"
          @touchcancel="onTouchEnd"
          @touchend="onTouchEnd"
          @touchmove="onTouchMove"
          @touchstart="onTouchStart"
      >
        <image :src="cardList[0].photo_m" class="card-img" mode="aspectFill"/>


        <view class="card-info-mask">
          <view class="nickname">{{ cardList[0].nickname }}</view>
          <view class="addressBox">
            <text v-if="!globalUtils.empty(cardList[0].areatitle)" class="b ico">{{ cardList[0].areatitle }}</text>

          </view>
          <view class="aboutus">{{ cardList[0].aboutus }}</view>
          <button class="infoBnt" @click="chatFn(cardList[0].uid)">立即聊天</button>
        </view>
      </view>

      <view class="overlay-tip">
        <view class="tip-content">
          <text class="arrow-icon">←</text>
          <text class="tip-text">滑动查看下一位</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "SwipeCard.scss";
</style>